<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>04监视属性</title>
	</head>
	<body>
		<div id="app">
			<h1>今天天气{{info}}</h1>
			<button @click="btn">切换天气</button>
		</div>
		<script src="../vue.js"></script>
		<script>
			// 监视属性watch:
			// 1.当被监视的属性变化时，回调函数自动调用,进行相关操作2.监视的属性必须存在,才能进行监视!!
			// 3.监视的两种写法:
			// (1).new Vue时传入watch配置
			// (2).通过vm. $watch监视
			//immediate: true, //true 初始化时让handler调用一下 默认为fals

			var app = new Vue({
				el: '#app', //Id #id class .name  标签 div
				//输出的数据
				data: function() {
					return {
						ishot: true
					}
				},
				//页面刷新时立刻执行的代码
				mounted: function() {},
				//对象 方法
				methods: {
					btn() {
						this.ishot = !this.ishot
					}
				},
				//计算属性
				computed: {
					info() {
						return this.ishot ? "好冷" : "好热"
					}
				},
				//监视属性
				watch: {
					ishot: {
						immediate: true, //true 初始化时让handler调用一下 默认为fals
						//handler什么时候调用?当isHot发生改变时。
						handler(newValue, oldValue) {
							console.log("ishot被修改了" + newValue, oldValue)
						}
					}
				},
			});
			//监视属性
			app.$watch('info', {
				immediate: true, //true 初始化时让handler调用一下 默认为fals
				//handler什么时候调用?当isHot发生改变时。
				handler(newValue, oldValue) {
					console.log("ishot被修改了" + newValue, oldValue)
				}
			})
			//简写
			app.$watch('info', function(newValue, oldValue) {
				console.log("ishot被修改了" + newValue, oldValue)
			})
		</script>
	</body>
</html>
